<template>
  <div>
    <el-dialog
      :visible.sync="drawerShow"
      :title="title"
      :destroy-on-close="true"
      width="700px"
    >
      <div v-if="drawerShow" class="drawer-content">
        <el-form ref="form" :model="form" :rules="rules" class="pl10 pr10" label-width="110px">
          <el-form-item label="华为会议室ID" prop="huaweId">
            <el-input v-model="form.huaweId" style="width: 400px;" placeholder="请填写华为会议室ID" />
          </el-form-item>
          <el-form-item label="会议室名称" prop="roomName">
            <el-input v-model="form.roomName" style="width: 400px;" placeholder="请填写会议室名称" />
          </el-form-item>
          <el-form-item label="是否平台自有" prop="status">
            <el-switch v-model="form.isPlatform" active-color="#13ce66" inactive-color="#ff4949"
              :active-value="1" :inactive-value="0">
            </el-switch>
            {{form.isPlatform == 1 ? '是' : '否'}}
          </el-form-item>
          <el-form-item label="所属企业" prop="companyId" v-if="form.isPlatform == 0">
            <el-select v-model="form.companyId" clearable style="width: 400px;" placeholder="请选择">
              <el-option v-for="(item,index) in companyList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"
              :active-value="1" :inactive-value="0">
            </el-switch>
            {{form.status == 1 ? '开启' : '关闭'}}
          </el-form-item>
          <el-form-item label="购买有效时间" prop="datetimerange">
              <el-date-picker v-model="form.datetimerange" type="datetimerange" style="width: 400px;" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
          </el-form-item>


          <div class="drawer-form-buttom-group">
            <el-button type="primary" :loading="waiting" @click="onSubmit('form')">立即创建</el-button>
            <el-button @click="drawerShow = false">取消</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { roomAdd, companyList } from '@/api/conferenceRoom'
export default {
  components: {
  },
  data() {
    return {
      drawerShow: false,
      title: '',
      form: {
        huaweId: '',
        roomName: '',
        companyId: '',
        datetimerange: '',
        status: 1,
        isPlatform: 1,
      },
      rules: {
        huaweId: [
          { required: true, message: '请填写华为会议室ID', trigger: 'blur' }
        ],
        roomName: [
          { required: true, message: '请填写会议室名称', trigger: 'blur' }
        ],
        companyId: [
          { required: true, message: '请选择所属企业', trigger: 'blur' }
        ],
        datetimerange: [
          { required: true, message: '请选择购买有效时间' }
        ],
      },
      points: null,
      waiting: false,
      companyList: []
      // areaData: [],
      // tradeData: []
    }
  },
  watch: {
    drawerShow(bl) {
      if (!bl) {
        this.$refs.form.resetFields()
        // this.form.status = '1';
      }
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
    })
  },
  async created() {
  },
  methods: {
    show(title, rowData) {
      this.title = title
      this.drawerShow = true
      companyList({}).then(response => {
        var companyList = response.result
        for (var i in companyList) {
          this.companyList.push({'label':companyList[i].enName, 'value':companyList[i].id});
        }
      })
    },
    onSubmit(formName) {
      // 清除校验图片 首先需判断图片是否上传再清除
      // this.$refs[formName].clearValidate()
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.waiting = true
          const params = JSON.parse(JSON.stringify(this.form))
          params.effectiveBeginTime = params.datetimerange[0];
          params.effectiveEndTime = params.datetimerange[1];
          roomAdd(params).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功！'
            })
            this.waiting = false
            this.drawerShow = false
            this.$emit('refresh')
          }).catch(() => {
            this.waiting = false
          }) 
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .form-title{
    margin: 15px 0 25px 0;
  }
  .logo-wrap{
    ::v-deep .el-upload{
      width: 175px;
      height: 75px;
      line-height: 73px;
    }
  }
  .upload-wrap{
    .hidBtn{
      ::after{
        display: block;
        content: "";
        clear: both;
      }
      ::v-deep .el-upload--picture-card{
        display:none;   /* 上传按钮隐藏 */
      }
    }
    .el-upload-list--picture-card::after{
      display: block;
      content: "";
      clear: both;
    }
    ::v-deep .el-upload-list--picture-card .el-upload-list__item{
      width: 100px;
      height: 100px;
      float: left;
      line-height: 98px;
      position: relative;
      .el-progress-circle{
        display: none !important;
      }
    }
    .uploader-item{
      width: 100px;
      height: 100px;
    }
    ::v-deep .el-upload{
      width: 100px;
      height: 100px;
      border: 1px dashed #d9d9d9;
      cursor: pointer;
      line-height: 98px;
      position: relative;
      border-radius: 6px;
      background: none;
      .uploader-item-icon {
        display: block;
        font-size: 28px;
        color: #8c939d;
        width: 98px;
        height: 98px;
        line-height: 98px;
        text-align: center;
      }
    }
    .tips{
      margin: 0;
      margin-top: 10px;
      line-height: 24px;
    }
  }
  .avatar {
    width: 98px;
    height: 98px;
    display: block;
  }
</style>
